{% load static %}
{% load rbac %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CRM</title>
    <link rel="shortcut icon" href="{% static 'rbac/imgs/luffy-study-logo.png' %}">
    <link rel="stylesheet" href="{% static 'rbac/plugins/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'rbac/plugins/font-awesome/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'rbac/css/commons.css' %}">
    <link rel="stylesheet" href="{% static 'rbac/css/nav.css' %}">
    <link rel="stylesheet" href="{% static 'rbac/css/rbac.css' %}">
    {% block css %} {% endblock %}
    <style>
        body {
            margin: 0;
        }

        .no-radius {
            border-radius: 0;
        }

        .no-margin {
            margin: 0;
        }

        .pg-body > .left-menu {
            background-color: #EAEDF1;
            position: absolute;
            left: 1px;
            top: 48px;
            bottom: 0;
            width: 220px;
            border: 1px solid #EAEDF1;
            overflow: auto;
        }

        .pg-body > .right-body {
            position: absolute;
            left: 225px;
            right: 0;
            top: 48px;
            bottom: 0;
            overflow: scroll;
            border: 1px solid #ddd;
            border-top: 0;
            font-size: 13px;
            min-width: 755px;
        }

        .navbar-right {
            float: right !important;
            margin-right: -15px;
        }

        .luffy-container {
            padding: 15px;
        }

        .left-menu .menu-body .static-menu {

        }

        .left-menu .menu-body .static-menu .icon-wrap {
            width: 20px;
            display: inline-block;
            text-align: center;
        }

        .left-menu .menu-body .static-menu a {
            text-decoration: none;
            padding: 8px 15px;
            border-bottom: 1px solid #ccc;
            color: #333;
            display: block;
            background: #efefef;
            background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));
            background: -ms-linear-gradient(bottom, #efefef, #fafafa);
            background: -moz-linear-gradient(bottom,  #efefef 0%, #fafafa 100%);
            background: -o-linear-gradient(bottom, #efefef, #fafafa);
            filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efefef')";
            box-shadow: inset 0 1px 1px white;
        }

        .left-menu .menu-body .static-menu a:hover {
            color: #2F72AB;
            border-left: 2px solid #2F72AB;
        }

        .left-menu .menu-body .static-menu a.active {
            color: #2F72AB;
            border-left: 2px solid #2F72AB;
        }
    </style>
</head>

<body>
    <div class="pg-header">
        <div class="nav">
            <div class="logo-area left">
                <a href="#">
                    <img class="logo" src="{% static 'rbac/imgs/logo.svg' %}">
                    <span style="font-size:18px;">luffycity</span>
                </a>
            </div>


            <div class="left-menu left">
                <a href="#" class="menu-item">资产管理</a>
                <a href="#" class="menu-item">用户信息</a>
                <a href="#" class="menu-item">路飞管理</a>
                <div class="menu-item">
                    <span>使用说明</span>
                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                    <div class="more-info">
                        <a href="#" class="more-item">管他什么菜单</a>
                        <a href="#" class="more-item">实在是编不了</a>
                    </div>
                </div>
            </div>

            <div class="right-menu right clearfix">
                <div class="user-info right">
                    <a href="#" class="avatar">
                        <img class="img-circle" src="{% static 'rbac/imgs/default.png' %}" alt="default img">
                    </a>
                    <div class="more-info">
                        <a href="#" class="more-item">个人信息</a>
                        <a href="{% url 'web:logout' %}" class="more-item">注销</a>
                    </div>
                </div>

                <a class="user-menu right">
                    消息
                    <i class="fa fa-commenting-o" aria-hidden="true"></i>
                    <span class="badge bg-success">2</span>
                </a>

                <a class="user-menu right">
                    通知
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    <span class="badge bg-success">2</span>
                </a>

                <a class="user-menu right">
                    任务
                    <i class="fa fa-bell-o" aria-hidden="true"></i>
                    <span class="badge bg-danger">4</span>
                </a>
            </div>
        </div>
    </div>

    <div class="pg-body">
        <div class="left-menu">
            <div class="menu-body">

                    <!--侧边栏-->
                    {%  multi_menu request %}

            </div>
        </div>

        <div class="right-body">
            {% breadcrumb request %}

            {% block content %} {% endblock %}
        </div>
    </div>
    <script type="text/javascript" src="{% static 'rbac/js/jquery-3.3.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'rbac/plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'rbac/js/rbac.js' %}"></script>
    {% block js %} {% endblock %}
</body>
</html>